<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片识别</title>
    <link rel="stylesheet" href="/css/recognize.css">
    <link rel="stylesheet" href="/css/style.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://rsms.me/inter/inter.css"/>
</head>
<body>
    <div class="violet-glow"></div>
    <header class="blurry-navbar">
        <div class="navbar-content">
            <h1 class="text-animation text-3xl font-bold">藏药植物药知识平台</h1>
            <nav>
                <ul>
                    <li><a href="/">图片识别</a></li>
                    <li><a href="graph.html">知识图谱</a></li>
                    <li><a href="database.html">数据库</a></li>
                    <li><a href="board.html">数据显示</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <div class="title animate">
        <h1>上传你的图片</h1>
    </div>
    <div class="recognize">
        <div class="img-preview">
            <img id="preview" src="/img/default.png" alt="图片预览">
        </div>
        <div class="control">
            <h1>开始识别</h1>
            <div class="result">
                <p id="result">识别结果：</p>
                <input type="text" placeholder="识别结果将展示在这里" class="output" id="resultText">
            </div>
            <span class="button1">
                <input type="file" id="uploadButton">上传图片</input>
            </span>
            <span class="button2">
                <button id="startButton">开始识别</button>
            </span>
        </div>
    </div>
    <script>
        // 图片预览
        let files = document.getElementById('uploadButton');
        let img = document.getElementById('preview');
        files.addEventListener('change', function () {
            img.src = URL.createObjectURL(files.files[0]);
        });

        // 开始识别
        document.getElementById("startButton").addEventListener("click", function () {
            const fileInput = document.getElementById("uploadButton");
            const file = fileInput.files[0];

            if (!file) {
                alert("请先上传图片！");
                return;
            }

            const formData = new FormData();
            formData.append("image", file);

            fetch("http://localhost:5000/api/recognize", {  // 注意这里的URL
                method: "POST",
                body: formData,
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok ' + response.statusText);
                }
                return response.json();
            })
            .then(data => {
                console.log("Response data:", data); // 添加调试信息
                if (data.prediction) {
                    document.getElementById("resultText").value = data.prediction;
                } else {
                    document.getElementById("resultText").value = "未找到有效预测";
                }
            })
            .catch(error => {
                console.error("识别失败：", error);
                document.getElementById("resultText").value = "识别失败，请检查控制台日志";
            });
        });
    </script>
</body>
</html>